<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" label-width="120px">
      <el-row el-row type="flex" justify="space-between" :gutter="16">
        <el-col :span="18">
          <el-row>
            <el-col :span="6">
              <el-form-item label="车牌号/车架号:" prop="carNoVinNo">
                <el-input v-model="queryParams.carNoVinNo" clearable placeholder="请输入车牌号/车架号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="产权方:" prop="deptName">
                <el-input v-model="queryParams.deptName" clearable placeholder="请输入产权方"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="品牌/车系/车型:">
                <linkage-select @changeNode="linkageChange" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="年检时效:" prop="noHandle">
                <el-select v-model="queryParams.noHandle" placeholder="请选择未处理时长">
                  <el-option label="有效" value="1">
                  </el-option>
                  <el-option label="临期" :value="2">
                  </el-option>
                  <el-option label="失效" :value="3">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

          </el-row>
          <el-row v-show="showSearch">
            <el-col :span="6">
              <el-form-item label="车辆归属城市:" prop="noHandle">
                <el-select v-model="queryParams.noHandle" placeholder="请选择未处理时长">
                  <el-option label="西安" value="1">
                  </el-option>
                  <el-option label="北京" :value="2">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="预计下次年检到期日:" prop="value1">
                <el-date-picker value-format="yyyy-MM-dd" v-model="queryParams.value1" type="date"
                  placeholder="请选择预计下次年检到期日" style="width: 100%;">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户名称:">

              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="showSearch">
            <el-col :span="24">
              <el-form-item label="查询时间:">
                <shortcut-date @dateChange='dateChange'></shortcut-date>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" style="display: flex;justify-content: space-between;">
          <div>
            <i class="el-icon-finished" style="color:#409EFF; font-size:16px;"></i>
            <el-button type="text" @click="() => showSearch = !showSearch"> <span
                style="font-size:14px;padding:0px 4px;">高级筛选</span></el-button>
            <i :class="!showSearch ? 'el-icon-arrow-down' : ' el-icon-arrow-up'"
              style="color:#409EFF; font-size:16px;"></i>
          </div>
          <div>
            <el-button type="primary" icon="el-icon-search" size="mini" @click.stop="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['demo:demo:export']">导出</el-button>
      </el-col>
    </el-row>
    <table-page :loading="loading" :dataList="dataList" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" @setSizeCurrent="getList">
      <template slot="tableColAc">
        <el-table-column label="操作" align="center" fixed="left" width="160">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="viewOpen(scope.row , 'view')"
              v-hasPermi="['demo:demo:remove']">查看</el-button>
            <!-- <el-button size="mini" type="text" v-hasPermi="['demo:demo:remove']"
               @click="viewOpen(scope.row , 'add')">年检</el-button> -->
            <el-button size="mini" type="text" v-hasPermi="['demo:demo:remove']">编辑</el-button>
            <el-button size="mini" type="text" @click="handleDelete(scope.row)"
              v-hasPermi="['demo:demo:edit']">删除</el-button>
          </template>
        </el-table-column>

      </template>

      <template slot="tableCol">
        <el-table-column label="车牌号">
          <template slot-scope="{row}">
            <el-button size="mini" type="text" @click="viewOpen(scope.row , 'view')"
              v-hasPermi="['demo:demo:remove']">{{row.carNo}}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="车架号" prop="vinNo" />

        <el-table-column label="品牌/车系/车型" show-overflow-tooltip width="140">
          <template slot-scope="{row}">
            {{ row.brandName }}{{ row.seriesName ? '/' + row.seriesName : '' }}{{ row.modelName ? '/' + row.modelName : '' }}
          </template>
        </el-table-column>
        <el-table-column label="产权方" prop="carOwner"/>
        <el-table-column label="车辆归属城市" width="120" prop="belongCityName"/>
        <el-table-column label="客户名称" width="96" prop="customerName"/>
        <el-table-column label="合同类型" width="96">
            <template slot-scope="{row}">
              <span v-show="row.contractType == 1">短租</span>
               <span v-show="row.contractType == 2">近易租</span>
            </template>

        </el-table-column>
        <el-table-column label="车辆性质" width="96">
         <template slot-scope="{row}">
           <span v-show="row.carType == 1">租赁的</span>
            <span v-show="row.carType == 2">营运</span>
             <span v-show="row.carType == 3">非营运</span>
         </template>
        </el-table-column>
        <el-table-column label="车辆类型" width="96" prop="carType">
          <template slot-scope="{row}">

          </template>
        </el-table-column>
        <el-table-column label="车辆登记日期" width="120">
          <template slot-scope="{row}">

          {{row.firstRegisterTime?$dayjs(row.firstRegisterTime).format('YYYY-MM-DD'):''}}
          </template>

        </el-table-column>
        <el-table-column label="年检" />
        <el-table-column label="年检总金额" width="100" prop="inspectionAllPrice"/>
        <el-table-column label="年检时效" prop="inspectionAging" min-width="120"/>
        <el-table-column label="年检状态" width="96" prop="inspectionStatus">
          <template slot-scope="scope">

          </template>
        </el-table-column>
        <el-table-column label="上次年检到期日" width="120" >
          <template slot-scope="{row}">
             {{row.inspectionLastTime?$dayjs(row.inspectionLastTime).format('YYYY-MM-DD'):''}}

          </template>

        </el-table-column>
        <el-table-column label="预计下次年检到期日" width="140">
            <template slot-scope="{row}">
               {{row.inspectionNextTime?$dayjs(row.inspectionNextTime).format('YYYY-MM-DD'):''}}

            </template>

        </el-table-column>
        <el-table-column label="预计下次年检线上/线下" width="160" />
        <el-table-column label="车管负责人" width="100" prop="carInspectionPerson"/>
        <el-table-column label="年检备注" prop="remark"/>

      </template>
    </table-page>
  </div>
</template>

<script>
  import {
    businessTypeList,
    insuranceTypeList,
    validityList
  } from "../components/dictionary.js";
  import {
    getInspection,
    delInspection
  } from "@/api/njgl/inspectAnnuallyApi.js";
  import {
    getToken
  } from "@/utils/auth";
  import LinkageSelect from "../components/linkageSelect.vue";
  import ShortcutDate from "../components/ShortcutDate/index.vue";


  export default {
    name: "InspectAnnuallyList",
    components: {
      LinkageSelect,
      ShortcutDate
    },
    computed: {
      // rowManage() {
      //   return (arr, type) => {
      //     let obj = {}
      //     let arri = []
      //     arri = arr.filter((v) => {
      //       return v.type == type
      //     })
      //     return obj = arri[0] || {}
      //   }
      // },
    },
    data() {
      return {
        //按钮loading
        buttonLoading: false,
        // 遮罩层
        loading: false,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: false,

        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        businessTypeList: [],
        insuranceTypeList: [],
        validityList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          carNoVinNo: "",
          brandName: "",
          modelName: "",
          seriesName: "",
          noDealTime: "",
          startTime: "",
          endTime: "",
          belongCityName: ""
        },

        total: 0,
        dataList: [

        ],
        tableCol: [{
            prop: "carNo",
            label: "车牌号",
            width: "100"
          },
          {
            prop: "vinNo",
            label: "车架号",
            width: "100"
          },
          {
            prop: "brandName",
            label: "品牌",
            width: "100"

          },
          {
            prop: "seriesName",
            label: "车系",
            width: "100"

          },
          {
            prop: "modelName",
            label: "车型",
            width: "100"

          },
          {

            label: "车辆状态",
            key: "businessType",
            width: "100"

          },
          {

            label: "维修状态",
            key: "maintenanceStatus",
            width: "100"

          },
          {

            label: "维保类型",
            key: "maintenance",
            width: "100"

          },
          {
            prop: "customerName",
            label: "客户名称",
            width: "100"

          },
          {
            prop: "expectStartTime",
            label: "预计开始时间",
            width: "160",

          }, {
            prop: "expectEndTime",
            label: "预计结束时间",
            width: "160"

          },
          {
            prop: "actualStartTime",
            label: " 实际开始时间",
            width: "160"

          }, {
            prop: "actualEndTime",
            label: "实际结束时间",
            width: "160"

          },
          {
            prop: "city",
            label: "车辆归属城市",
            width: "100",

          }, {
            prop: "cityName",
            label: "所在城市",
            width: "100",

          }


        ],


        // 表单参数
        form: {
          brandId: "",
          brandName: "",
          seriesName: "",
          seriesId: "",
          modelId: "",
          modelName: "",
          shortName: "",
          seriesGroupName: "",
          seriesGroupId: "",
          price: "",
          year: "",
          makerId: "",
          makerName: "",

          // 车辆信息
          liter: "",
          dischargeStandard: "",
          fuelTypeId: "",
          fuelTypeName: "",
          enginePower: "",
          enginePowerKw: "",
          isGreen: "",
          modelCode: "",
          driveName: "",
          driveType: "",
          modelStatus: "",
          gearType: "",
          gearName: "",
          greenTypeId: "",
          greenTypeName: "",
          makerDate: "",
          minRegYear: "",
          maxRegYear: "",
          stopMakeYear: "",
          intake: "",
          seatNumber: "",
          bodyType: "",
          doorNumber: "",
          carStruct: "",
          isParallel: "",
          priceAllowance: "",
        },
        // 表单校验
        rules: {
          testKey: [{
            required: true,
            message: "key键不能为空",
            trigger: "blur"
          }],
          value: [{
            required: true,
            message: "值不能为空",
            trigger: "blur"
          }],
        }
      };
    },
    created() {
      this.getList();
      this.businessTypeList = businessTypeList
      this.insuranceTypeList = insuranceTypeList
      this.validityList = validityList

    },
    methods: {
      dateChange(val) {
        console.log(val);
        if (val) {
          this.queryParams.startTime = val[0]
          this.queryParams.endTime = val[1]
        } else {
          this.queryParams.startTime = ""
          this.queryParams.endTime = ""
        }
        // this.getList();
      },
      linkageChange(val) {

        if (val) {
          this.queryParams.brandName = val[0] ? val[0].name : ''
          this.queryParams.seriesName = val[1] ? val[1].name : ''
          this.queryParams.modelName = val[2] ? val[2].name : ''
        } else {
          this.queryParams.brandName = ""
          this.queryParams.seriesName = ""
          this.queryParams.modelName = ""
        }
        this.$forceUpdate()
      },
      /** 查询测试单表列表 */
      getList() {
        this.loading = true;
        getInspection(this.queryParams).then(res => {
          if (res.code == "200") {
            const {
              rows,
              total
            } = res
            this.dataList = rows
            this.total = total
            this.loading = false;
          }
        });
      },


      // 表单重置
      reset() {
        this.form = {
          id: "",
          brandId: "",
          brandName: "",
          seriesName: "",
          seriesId: "",

          modelName: "",
          shortName: "",
          seriesGroupName: "",
          seriesGroupId: "",
          price: "",
          year: "",
          makerId: "",
          makerName: "",

          // 车辆信息
          liter: "",
          dischargeStandard: "",
          fuelTypeId: "",
          fuelTypeName: "",
          enginePower: "",
          enginePowerKw: "",
          isGreen: "",
          modelCode: "",
          driveName: "",
          driveType: "",
          modelStatus: "",
          gearType: "",
          gearName: "",
          greenTypeId: "",
          greenTypeName: "",
          makerDate: "",
          minRegYear: "",
          maxRegYear: "",
          stopMakeYear: "",
          intake: "",
          seatNumber: "",
          bodyType: "",
          doorNumber: "",
          carStruct: "",
          isParallel: "",
          priceAllowance: "",
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },

      /** 重置按钮操作 */
      resetQuery() {
        this.queryParams.brandName = ""
        this.queryParams.seriesName = ""
        this.queryParams.modelName = ""
        this.resetForm("queryForm");
        this.handleQuery();
      },

      viewOpen(row, type) {
        if (type == "view") {
          this.$router.push({
            path: "/njgl/inspectAnnuallyDetails",
            query: {
              id: row.id,
              type
            }
          })
        } else if (type == "add") {
          this.$router.push({
            path: "/njgl/addInspectAnnually",
            query: {
              id: row.id,
              type
            }
          })
        }


      },

      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.buttonLoading = true;
            if (this.form.id) {
              updateCar(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            } else {
              carBrandAdd(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              }).finally(() => {
                this.buttonLoading = false;
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否删除？').then(() => {
          this.loading = true;
          return delInsurance(ids);
        }).then(() => {
          this.loading = false;
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).finally(() => {
          this.loading = false;
        });
      },

      /** 导出按钮操作 */
      handleExport() {
        this.download('car/carMaintenance/export', {
          ...this.queryParams
        }, `维修列表_${new Date().getTime()}.xlsx`)
      },

    }
  };
</script>
